<template>
  <div class="flexac" style="position: relative; justify-content: center">
    <div
      class="jindutiao flexac"
      style="
        position: absolute;
        left: 50%;
        top: -15px;
        transform: translate(-50%, 0);
      "
      v-if="showAdd"
    >
      <!-- 进度条 -->
      <div
        style="
          width: 9%;
          height: 100%;
          background-color: rgb(220, 220, 0);
          margin-left: 0.75%;
        "
        v-for="item of jindutiao"
        :key="'jindutiao' + item"
      ></div>
    </div>
    <div class="scale12" @click="addCoalpackageClick">工厂</div>
  </div>
</template>
  
  <script>
export default {
  name: "factory-",
  props: ["coalNum"],

  data() {
    return {
      coalpackage: 0,

      jindutiao: 0,
      showAdd: false,
    };
  },
  mounted() {},
  methods: {
    addCoalpackageClick() {
      if (this.coalNum < 10) {
        return;
      }
      if (this.jindutiao) {
        return;
      }
      this.showAdd = true;
      let that = this;
      let timer = setInterval(() => {
        if (that.jindutiao == 10) {
          that.showAdd = false;
          that.jindutiao = 0;
          that.coalpackage++;
          that.$emit("getData", that.coalpackage);
          clearInterval(timer);
          return;
        }
        that.jindutiao++;
      }, 500);
    },
  },
};
</script>
  
  <style scoped>
.jindutiao {
  width: 80px;
  height: 10px;
  border: 2px solid #000;
  border-radius: 10px;
  overflow: hidden;
}
</style>